<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: zhr
 * @LastEditTime: 2022-01-08 11:50:02
-->
<template>
  <div ref="bottom4_container" style="height: 95%"></div>
</template>
<script>
import { Bullet } from '@antv/g2plot';

export default {
    data(){
      return{

      }
    },

    mounted(){
    this.initChart()
    },
    methods:{
        initChart(){
          const data = [
  {
    title: '年级',
    ranges: [100],
    measures: [80],
    target: 85,
  },
];
          const bullet = new Bullet(this.$refs.bottom4_container, {
          data: [{ title: '大一', ranges: [100], measures: [93], target: 85 },
          { title: '大二', ranges: [100], measures: [86], target: 85 },
          { title: '大三', ranges: [100], measures: [55], target: 85 },
          { title: '大四', ranges: [100], measures: [63], target: 85 }],
          measureField: 'measures',
          rangeField: 'ranges',
          targetField: 'target',
          xField: 'title',
          color: {
            range: '#f0efff',
  },
  yAxis: false,
});
bullet.render();
        }
    },
}
</script>
